<template>
	<view>
		<!-- 顶部tab栏 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color='#FD7373'
			inactive-color='#999999'></u-tabs>
		<!-- 订单列表盒子 -->
		<view class="orderitemBox" v-for="(order,i) in orderList" :key='i'
			@click.stop="$jump('/subpkg/orderDetail/orderDetail?order_id='+order.id)">
			<view class="flex row-between">
				<text class="fs26">{{order.shop_name}}</text>
				<text class="color-red fs24">{{order.status|type}}</text>
			</view>
			<block v-for="(item2,i2) in order.item" :key='i2'>
				<view class="mt20 flex goodsbox pb20"
					@click.stop="$jump('/subpkg/goodsDetail/goodsDetail?spu='+item2.spu)">
					<image :src="item2.thumb" class="w110 h110 radius16 mr20"></image>
					<view class="flex1 flex row-column row-between">
						<view class="fs24">{{item2.goods_name}}</view>
						<view class="fs24 color9">{{item2.spece_content}}</view>
						<view class="fs12 flex row-between">
							<text class="fs30 color3 fw500">¥{{item2.price}}</text>
							<text class="color9 fs30">x{{item2.num}}</text>
						</view>
					</view>
				</view>
			</block>

			<view class="flex row-between col-center mt20">
				<text class="fw">总价：¥{{order.total_amount}}</text>
				<view class="flex">
					<view class="cancelbox mr30" v-if="order.status==0" @click="cancelBtn(order)">取消订单</view>
					<view class="paybox" v-if="order.status==0" @click.stop="gotoPay(order)">去支付</view>
					<!--  -->
					<view class="paybox" @click.stop="gotoSure(order.id)" v-if="order.status==4">确认收货</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'myorder',
		onLoad(opt) {
			console.log(opt)
			this.current = opt.current
			this.getList()
		},
		filters: {
			type: function(val) {
				if (val == -1) {
					return '已取消'
				} else if (val == 0) {
					return '未支付'
				} else if (val == 1) {
					return '待确认'
				} else if (val == 2) {
					return '待发货'
				} else if (val == 3) {
					return '已驳回'
				} else if (val == 4) {
					return '已发货'
				} else if (val == 5) {
					return '已收货'
				} else if (val == 6) {
					return '已完成'
				}
			}
		},
		data() {
			return {
				status: 0,
				list: [{
					name: '全部',
					type: 0,
				}, {
					name: '待付款',
					type: 1,
				}, {
					name: '待确认',
					type: 6,
				}, {
					name: '待发货',
					type: 2,
				}, {
					name: '待收货',
					type: 3,
				}, {
					name: '已完成',
					type: 4,
				}, {
					name: '驳回',
					type: 5,
				}],
				current: 0,
				//订单列表
				orderList: []
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.getList()
			},
			//获取订单列表
			getList() {
				this.$api.getorder_list({
					status: this.list[this.current].type
				}).then(res => {
					// console.log(res)
					this.orderList = res.data.data
				})
			},
			//取消订单
			cancelBtn(order) {
				console.log(order)
				this.$api.cancel_order({
					order_id: order.id
				}).then(res => {
					console.log(res)
					this.getList()
				})
			},
			gotoPay(order) {
				console.log(order)
				// return
				uni.navigateTo({
					url: '/subpkg/orderPay/orderPay?id=' + order.tradn_id + '&total=' + order.total_amount +
						"&shop_id=" + order.shop_id
				})
			},
			//确认收货
			gotoSure(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认收货?',
					success: function(res) {
						if (res.confirm) {
							console.log(id)
							that.$api.take_delivery({
								order_id: id
							}).then(res => {
								// console.log(res)	
								that.$msg(res.msg)
								that.getList()
							})
					 } else if (res.cancel) {
							that.$msg('您取消了操作')
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.orderitemBox {
		margin: 30rpx;
		margin-bottom: 0;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;

		.goodsbox {
			border-bottom: 2rpx solid #F5F5F5;
		}

		.cancelbox,
		.paybox {
			width: 140rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 2rpx solid #D23030;
			font-size: 24rpx;
			font-weight: 400;
			color: #D23030;
			text-align: center;
			line-height: 58rpx;
		}

		.paybox {
			background: #D23030;
			color: #FFFFFF;
			;
		}
	}
</style>
